<template>
  <div>
    <div class="BT">
      <div class="biaotou">
        <img src="../assets/left.png" alt @click="homeFn" />
      </div>
      <div class="haoma">
        <h2 class="phone">请输入您的手机号码</h2>
        <p class="model">手机号码</p>
        <div class="jiabaliu">
          <span>+86</span>
          <input type="text" v-model="nums" placeholder="请输入手机号" @input="inputFn" />
        </div>
        <div class="hengxian"></div>
        <p class="chuangjian">登录即创建账户</p>
        <p class="tongyi">
          <i class="beijingt"></i>
          我已同意并阅读
          <span>百联通用户服务协议</span>、
          <span>安付宝用户服务协议</span>、
          <span>安付宝隐私权政策</span>
        </p>
      </div>
      <div :class="!num?'login':'acti'" @click="IfFn"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nums: "",
      bool: false,
      num: 0
    };
  },
  mounted() {
    this.inputFn();
  },
  methods: {
    inputFn() {
      if (this.nums.length == 11) {
        this.num = 1;
      } else {
        this.num = 0;
      }
    },
    //跳转首页
    homeFn() {
      this.$router.push("/");
    },
    //判断方法
    IfFn() {
      localStorage.setItem("name",  this.nums.substr(0, 3)+'****'+this.nums.substr(7, 4));
      let reg = /^1[3456789]\d{9}$/;
      if (!reg.test(this.nums)) {
        alert("手机号格式不正确");
      } else {
        this.num = 1;
        this.$router.push({
          name: "users",
          params: {
            boole: this.bool
          }
        });

        //console.log(1)
      }
    }
  }
};
</script>

<style>
.login {
  margin-top: 0.7rem;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../assets/btn.png");
  background-size: contain;
  float: right;
}
.acti {
  margin-top: 0.7rem;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../assets/btn1.png");
  background-size: contain;
  float: right;
}
.tongyi {
  color: #999;
  margin-top: 0.5rem;
  font-size: 0.21rem;
}
.beijingt {
  background: url("../assets/xuanzhong.png");
  width: 0.27rem;
  height: 0.27rem;
  display: inline-block;
  background-size: cover;
  vertical-align: middle;
}
.chuangjian {
  font-size: 0.23rem;
  color: #999;
  margin-top: 0.4rem;
}
::-webkit-input-placeholder {
  color: #ccc;
  font-size: 0.34rem;
}
.hengxian {
  border-bottom: 0.04rem solid #ff4a4a;
  border-radius: 1px;
}
.jiabaliu input {
  width: 100%;
  padding: 0 0.4rem;
  box-sizing: border-box;
  clip: rect(0 0 0 0);
  border: 0;
  background: none;
}
.jiabaliu {
  height: 1rem;
  display: flex;
  font-size: 0.4rem;
  color: #333;
  line-height: 1rem;
  position: relative;
}
.model {
  background: url("../assets/phone.png") no-repeat;
  height: 0.3rem;
  background-size: 0.25rem 0.35rem;
  margin: 0.9rem 0 0 0;
  padding: 0.1rem 0 0 0.35rem;
  color: #999;
  font-size: 0.2rem;
}
.haoma {
  padding: 0.2rem 0.7rem;
}
body {
  background: white;
}
.phone {
  font-weight: 100;
  font-size: 0.4rem;
}
.BT {
  padding: 0.2rem 0.2rem;
}
.biaotou img {
  width: 0.55rem;
  height: 0.55rem;
}
</style>